<template>
  <el-dialog :append-to-body="true" :close-on-click-modal="false" :before-close="cancel" :visible.sync="dialog"
             title="题目" width="80%" @open="init">
    <div class="el-dialog-div">
      <Qslist ref="qsList"
              v-for="(item, index) in Lists"
              :index="index + 1"
              :item="item"
              :key="index"
              @del="delList(index)"
              @editForm="editForm"
              @addForm="addForm"/>
      <div class="add-btn" @click="addQus()" v-if="isAdd">添加题目</div>
      <Qsform :bank-id="id" @setForm="setForm" @cancelAdd="cancelAdd" v-else/>
    </div>
    <div slot="footer" class="dialog-footer">
      <el-button @click="cancel()">取消</el-button>
      <el-button type="primary" @click="save()" :loading="submiting">保存</el-button>
    </div>
  </el-dialog>
</template>

<script>
  import { queList, addQuestion } from '@/api/business/questionBank'
  import Qslist from '../questionBank/components/Qslist.vue'
  import Qsform from '../questionBank/components/Qsform.vue'

  export default {
    data() {
      return {
        dialog: false,
        loading: false,
        submiting: false,
        isAdd: true, //添加题目按钮的显示与否
        list: [], //已经添加好的试题数据
        Lists: [],
        id: null
      }
    },
    components: {
      Qslist,
      Qsform
    },
    watch: {
      Lists(value) {
        this.Lists = value
      }
    },
    methods: {
      init() {
        if (this.id) {
          this.loading = true
          queList({ bankId: this.id ,size:1000})
            .then(res => {
              this.Lists = res.content || []
            })
            .catch(err => {
              this.$message.error(err.message)
              console.error(err)
            })
            .finally(() => {
              this.loading = false
            })
        }
      },
      cancelAdd(){
        this.isAdd=true
      },
      save() {
        this.submiting = true
        let data = this.Lists
        data.map(r => {
          if (r.lists && r.lists.length) {
            if (r.questionImg) r.questionImg = JSON.stringify(r.questionImg)
            r.lists.map(q => {
              if (q.answerImg) q.answerImg = JSON.stringify(q.answerImg)
            })
          }
        })
        // return
        this.Lists = data
        // return
        addQuestion({ lists: this.Lists })
          .then(res => {
            this.$message.success('保存成功')
            this.cancel()
          })
          .catch(err => {
            this.$message.error(err.message)
          })
          .finally(() => {
            this.loading = false
          })
      },
      delList(index) {
        this.Lists[index].isDelete = 1
      },
      setForm(form) {
        this.Lists.push(form)
        this.isAdd = true
      },
      addQus() {
        this.isAdd = false
      },
      handleOk() {
        if (this.submiting) {
          return
        }
        this.submiting = true
      },
      handleCancel() {
        this.isAdd = true
      },
      cancel() {
        this.dialog = false
        this.submiting = false
      },
      editForm(json) {
        this.Lists.splice(json.index, 1, json.form)
      },
      addForm(json) {
        this.Lists.splice(json.index, 0, json.form)
      }
    }
  }
</script>
<style lang="scss" scoped>
  .el-dialog-div {
    height: 55vh;
    overflow-x: hidden;
  }

  .container {
    padding: 30px;
  }

  .btn-box {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 20px;
  }

  .add-btn {
    display: flex;
    height: 80px;
    background-color: #eeeeee;
    border-radius: 5px;
    align-items: center;
    justify-content: center;
    border: dashed 1px #aaa;
    color: #aaa;
    cursor: pointer;
  }

  .add-btn:hover {
    border: dashed 1px #b02027;
    color: #b02027;
  }
</style>
